<div class="widgets" xmlns="http://www.w3.org/1999/html">


  <ba-card class = "vuls" title="漏洞列表" baCardClass="with-scroll table-panel">

    <div class="container row align-items-md-center">
      <div class="row col-md-3 align-items-md-center ">
        <div class="col-md-5 bg-dark">漏洞名称</div>
        <div class="col-md-7"><input type="text" [(ngModel)]="title" class="form-control"></div>
      </div>
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">来源</div>
        <div class="col-md-7"><input type="text" [(ngModel)]="url" class="form-control"></div>
      </div>
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">CVE-ID</div>
        <div class="col-md-7"><input type="text" [(ngModel)]="cveId" class="form-control"></div>
      </div>
      <div class="row col-md-4 align-items-md-center">
        <div class="col-md-4 ">发布时间</div>
        <div class="col-md-8">

          <p-calendar   name="time" [(ngModel)]="publishTime" [locale]="cn" [monthNavigator]="true"
                      [yearNavigator]="true"
                      yearRange="2000:2030" dateFormat="yy-mm-dd" [showTime]="false" [showSeconds]="false"
                      [showOtherMonths]="false"
                      placeholder="选择日期">
          </p-calendar>
        </div>
      </div>
    </div>
    <br>
    <div class="container row align-items-md-center">
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">影响系统</div>
        <div class="col-md-7"><input type="text" [(ngModel)]="effectSys" class="form-control"></div>
      </div>
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">描述</div>
        <div class="col-md-7"><input type="text" [(ngModel)]="message" class="form-control"></div>
      </div>
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">POC</div>
        <div class="col-md-7"><input type="text" [(ngModel)]="poc" class="form-control"></div>
      </div>
      <div class="row col-md-4 align-items-md-center">
        <div class="col-md-4 ">更新时间</div>
        <div class="col-md-8">
          <p-calendar  name="time" [(ngModel)]="updateTime" [locale]="cn" [monthNavigator]="true"
                      [yearNavigator]="true"
                      yearRange="2000:2030" dateFormat="yy-mm-dd" [showTime]="false" [showSeconds]="false"
                      [showOtherMonths]="false"
                      placeholder="选择日期">
          </p-calendar>
        </div>
      </div>
    </div>
    <br>
    <div class="container row align-items-md-center">
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">补丁</div>
        <div class="col-md-7"><input type="text" [(ngModel)]="vendorPatch" class="form-control"></div>
      </div>

      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">危害程度</div>
        <div class="col-md-7">
          <select class="form-control" required #vtypes="ngModel" type="text" [(ngModel)]="levelid" name="vlevels" placeholder="危害程度"><!--required #logintype="ngModel"-->
            <option *ngFor="let vullevel of vullevels" [value]="vullevel.id"> {{vullevel.level}}
            </option>
          </select>
        </div>
      </div>
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-5 ">漏洞类型</div>
        <div class="col-md-7">
          <select class="form-control" required #vtypes="ngModel" type="text" [(ngModel)]="typeid" name="vtypes" placeholder="爬虫类型"><!--required #logintype="ngModel"-->
            <option *ngFor="let vultype of vultypes" [value]="vultype.id"> {{vultype.type}}
            </option>
          </select>
        </div>
      </div>
      <div class="row col-md-4 align-items-md-center">
        <div class="col-md-6 ">
          <button class="btn btn-primary  btn-block" (click)="search()">{{searching}}</button>
        </div>
        <div class="  col-md-6">
          <button class="btn btn-warning btn-block" (click)="searchAll()">显示所有数据</button>
        </div>
      </div>
    </div>
    <br>


    <div class="container row align-items-md-center">
      <div class="row col-md-4 align-items-md-center">

          每页显示：<select [(ngModel)]="itemsPerPage" (change)="onChange()">
            <option *ngFor="let number of numbers">{{number}}</option>
          </select>条数据,共查询到<strong>{{totalItems}}</strong>条数据
      </div>

      <div class="row col-md-2 align-items-md-center">

      </div>
      <div class="row col-md-3 align-items-md-center">
        <div class="col-md-3 "></div>
        <div class="col-md-9">
          <button class="btn btn-warning  " (click)="toExcel()">下载查询结果Excel</button>

        </div>
      </div>
      <div class="row col-md-4 align-items-md-center">
        <div class="col-md-6 ">
          <ba-file-uploader [fileUploaderOptions]="fileUploaderOptions"></ba-file-uploader>
        </div>
        <div class="  col-md-6">
          <button   class="btn btn-success  btn-block" (click)="download()">下载数据库文件   </button>
        </div>
      </div>
    </div>
    <br>

    <div class="horizontal-scroll" >
      <table class="table  table-hover" >
        <thead>
        <tr class="black-muted-bg">
          <!--<th class="table-id">id</th>-->
          <th    >漏洞名称</th>
          <th    >漏洞来源</th>
          <th     >CVE-ID</th>
          <th    >发布时间</th>
          <th    >更新时间</th>
          <th    >影响系统</th>
          <th    >POC</th>
          <th    >补丁</th>
          <th    >描述</th>


          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of vuls">
          <!--<td class="table-id">{{ item.id }}</td>-->
          <td class="mytd" ><p><a href="javascript:;" (click)="showChildModal(item)">{{ item.title}}</a></p></td>
          <td class="mytd" ><p>{{ item.url }}</p></td>
          <td  class="mytd"   ><p>{{ item.cveId }}</p></td>
          <td  class="mytd"   ><p>{{ item.publishTime}}</p></td>
          <td class="mytd"    ><p>{{ item.updateTime }}</p></td>
          <td  class="mytd"   ><p>{{ item.effectSys }}</p></td>

          <td  class="mytd"   ><p>{{ item.poc }}</p></td>
          <td class="mytd"     ><p>{{ item.vendorPatch }}</p></td>
          <td class="mytd"    ><p>{{ item.message }}</p></td>

          <td class="text-right" ><button class="btn btn-info btn-raised btn-mm" (click)="showChildModal(item)">查看</button>
            <button class="btn btn-primary btn-raised btn-mm" (click)="editChildModal(item)">编辑</button>
            <button class="btn btn-danger btn-raised btn-mm" (click)="delete(item)">删除</button></td>
        </tr>
        <tr>

        </tr>
        </tbody>
      </table>
    </div>

    <!--=========================================分页===================================================-->
    <div class="row">
      <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" [maxSize]="maxSize"
                  [itemsPerPage]="itemsPerPage"  (numPages)="smallnumPages = $event" [rotate]="false"
                  previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                  (pageChanged)="pageChanged($event)"  class="pagination-sm">
      </pagination>
      <div>共<strong>{{smallnumPages}}</strong>页，跳转到第 <select [(ngModel)]="selectedpage" (change)="setpage()">
        <option *ngFor="let pagenumber of totalnumbers">{{pagenumber}}</option></select>页</div>


    </div>

    <!--========================================分页end===================================================-->
  </ba-card>
</div>







